<template>
  <div align="center">
    <h2>房型列表</h2>
    <input type="button" value="导出数据" @click="Daochu">
    <input type="button" value="增加房间号">
    <input type="button" value="排序">
    <table border="1">
      <tr>
        <td>房型编号</td>
        <td>房号</td>
        <td>房型</td>
        <td>房型面积</td>
        <td>房型价钱</td>
        <td>房型状态</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in list">
        <td>{{item.h_id}}</td>
        <td>{{item.hN_id}}</td>
        <td>{{item.h_name}}</td>
        <td>{{item.h_area}}</td>
        <td>{{item.h_price}}</td>
        <td>{{item.h_state ==1?"启用":"停用"}}</td>
        <td>
          <input type="button" value="修改" @click="UpdateInfo">
          <input type="button" value="删除" @click="DeleteInfo(item.h_id)">
          <input type="button" value="停用">
        </td>
      </tr>
    </table>
    <table>
      共有<span>{{ counts }}</span>条数据,每页<span>{{ state.pagesize }}</span>条,当前第<span>{{ state.pageindex }}</span>/<span>{{ indexs }}</span>页
      <input type="button" value="首页" @click="goPage(1)">
      <input type="button" value="上一页" @click="goPage(state.pageindex -1)">
      <input type="button" value="下一页" @click="goPage(state.pageindex + 1)">
      <input type="button" value="尾页" @click="goPage(indexs)">
    </table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive,toRefs } from 'vue';
import axios from 'axios';

import { useRouter } from 'vue-router';
let router = useRouter()

let data:any = reactive({
  state:{
    pageindex:1,
    pagesize:4
  },
  list:[],
  indexs:0,
  counts:0
})
let {state,list,indexs,counts} = toRefs(data)

onMounted(()=>{
  getList()
})

const goPage=(a:any)=>{
  if(a > 1 && a < counts.value){
   data.state.pageindex = a
    getList()
  }
}

const getList=()=>{
  axios({
    url:'/api/House/HouseTypeList',
    method:'get',
    params:state.value
  })
  .then(res=>{
    console.log(res)
    list.value = res.data.data
    indexs.value = res.data.indexs
    counts.value = res.data.counts
  })
  .catch(err=>{
    console.log(err)
  })
}

const DeleteInfo=(h_id:any)=>{
 var fn = confirm("确认删除吗?")
 if(fn == true){
  axios({
    url:"/api/House/DeleteInfo",
    method:'get',
    params:{
      h_id : h_id
    }
  })
  .then(res=>{
    console.log(res)
    if(res.data.data > 0){
      alert("删除成功");
      getList()
    }
  })
  .catch(err=>{
    console.log(err)
  })
 }
}

const Daochu=()=>{
  location.href = "https://localhost:7005/api/House/ExportExcel"
}

const UpdateInfo=()=>{
  router.push('/houseupdate')
}
</script>

<style scoped>
span{
  color:red;
}
</style>